<template>
  <div>
    <h1>MBTI职业性格测试题</h1>
    <h5>注意：每个道题只能选择一次，不能修改</h5>
    <div class="test">
      <el-carousel ref="carousel" arrow="never" :autoplay="false" indicator-position="none">
        <el-carousel-item v-for="item in question" :key="item.id">
          <div v-if="item.id !== 94">
            <el-form class="question" style="margin-top: 30px">{{ item.id }}.{{ item.title }} <br><br>
            </el-form>
            <el-button @click="optionA(item)" class="options" type="primary" plain size="large">{{ item.optionA }}
            </el-button><br />
            <el-button @click="optionB(item)" class="options" type="primary" plain size="large">{{ item.optionB }}
            </el-button>
          </div>
          <div v-if="item.id === 94">
            <el-button @click="result" class="result" type="primary" plain size="large">查看测试结果</el-button>
          </div>
        </el-carousel-item>
      </el-carousel>

    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      question: [
        { id: 1, title: "当你要外出一整天，你会", optionA: "A.计划你要做什么和在什么时候做", optionB: "B.说去就去", answerA: "J", answerB: "P" },
        { id: 2, title: "你认为自己是一个", optionA: "A.较为随兴所至的人", optionB: "B.较为有条理的人", answerA: "P", answerB: "J" },
        { id: 3, title: "假如你是一位老师，你会选教", optionA: "A.以事实为主的课程", optionB: "B.涉及理论的课程", answerA: "S", answerB: "N" },
        { id: 4, title: "你通常", optionA: "A.与人容易混熟", optionB: "B.比较沉静或矜持", answerA: "E", answerB: "I" },
        { id: 5, title: "一般来说，你和哪些人比较合得来？", optionA: "A.富于想象力的人", optionB: "B.现实的人", answerA: "N", answerB: "S" },
        { id: 6, title: "你是否经常让", optionA: "A.你的情感支配你的理智", optionB: "B.你的理智主宰你的情感", answerA: "F", answerB: "T" },
        { id: 7, title: "处理许多事情上，你会喜欢", optionA: "A.凭兴所至行事", optionB: "B.按照计划行事", answerA: "P", answerB: "G" },
        { id: 8, title: "你是否", optionA: "A.容易让人了解", optionB: "B.难于让人了解", answerA: "E", answerB: "I" },
        { id: 9, title: "按照程序表做事", optionA: "A.合你心意", optionB: "B.令你感到束缚", answerA: "J", answerB: "P" },
        { id: 10, title: "当你有一份特别的任务，你会喜欢", optionA: "A.开始前小心组织计划", optionB: "B.边做边找须做什么", answerA: "J", answerB: "P" },
        { id: 11, title: "在大多数情况下，你会选择", optionA: "A.顺其自然", optionB: "B.按程序表做事", answerA: "P", answerB: "J" },
        { id: 12, title: "大多数人会说你是一个", optionA: "A.重视自我隐私的人", optionB: "B.非常坦率开放的人", answerA: "I", answerB: "E" },
        { id: 13, title: "你宁愿被人认为是一个", optionA: "A.实事求是的人", optionB: "B.机灵的人", answerA: "S", answerB: "N" },
        { id: 14, title: "在一大群人当中，通常是", optionA: "A.你介绍大家认识", optionB: "B.别人介绍你", answerA: "E", answerB: "I" },
        { id: 15, title: "你会跟哪些人做朋友", optionA: "A.常提出新注意的", optionB: "B.脚踏实地的", answerA: "N", answerB: "S" },
        { id: 16, title: "你倾向", optionA: "A.重视感情多于逻辑", optionB: "B.重视逻辑多于感情", answerA: "F", answerB: "T" },
        { id: 17, title: "你比较喜欢", optionA: "A.坐观事情发展才作计划", optionB: "B.早就作计划", answerA: "P", answerB: "J" },
        { id: 18, title: "你喜欢花很多的时间", optionA: "A.一个人独处", optionB: "B.和别人在一起", answerA: "I", answerB: "E" },
        { id: 19, title: "与很多人一起会", optionA: "A.令你活力培增", optionB: "B.常常令你心力憔悴", answerA: "E", answerB: "I" },
        { id: 20, title: "你比较喜欢", optionA: "A.很早便把约会、社交聚集等事情安排妥当", optionB: "B.无拘无束，看当时有什么好玩就做什么", answerA: "J", answerB: "P" },
        { id: 21, title: "计划一个旅程时，你较喜欢", optionA: "A.大部分的时间都是跟当天的感觉行事", optionB: "B.事先知道大部分的日子会做什么", answerA: "P", answerB: "J" },
        { id: 22, title: "在社交聚会中，你", optionA: "A.有时感到郁闷", optionB: "B.常常乐在其中", answerA: "I", answerB: "E" },
        { id: 23, title: "你通常", optionA: "A.和别人容易混熟", optionB: "B.趋向自处一隅", answerA: "E", answerB: "I" },
        { id: 24, title: "哪些人会更吸引你？", optionA: "A.一个思想敏捷及非常聪颖的人", optionB: "B.实事求是，具丰富常识的人", answerA: "N", answerB: "S" },
        { id: 25, title: "在日常工作中，你会", optionA: "A.颇为喜欢处理迫使你分秒必争的突发", optionB: "B.通常预先计划，以免要在压力下工作", answerA: "P", answerB: "J" },
        { id: 26, title: "你认为别人一般", optionA: "A.要花很长时间才认识你", optionB: "B.用很短的时间便认识你", answerA: "I", answerB: "E" },
        { id: 27, title: "在下列一对词语中，哪一个词语更合你心意？", optionA: "A.注重隐私", optionB: "B.坦率开放", answerA: "I", answerB: "E" },
        { id: 28, title: "在下列一对词语中，哪一个词语更合你心意", optionA: "A.预先安排的", optionB: "B.无计划的", answerA: "J", answerB: "P" },
        { id: 29, title: "在下列一对词语中，哪一个词语更合你心意", optionA: "A.抽象", optionB: "B.具体", answerA: "N", answerB: "S" },
        { id: 30, title: "在下列一对词语中，哪一个词语更合你心意", optionA: "A.温柔", optionB: "B.坚定", answerA: "F", answerB: "T" },
        { id: 31, title: "在下列一对词语中，哪一个词语更合你心意", optionA: "A.思考", optionB: "B.感受", answerA: "T", answerB: "F" },
        { id: 32, title: "在下列一对词语中，哪一个词语更合你心意", optionA: "A.事实", optionB: "B.意念", answerA: "S", answerB: "N" },
        { id: 33, title: "在下列一对词语中，哪一个词语更合你心意", optionA: "A.冲动", optionB: "B.决定", answerA: "P", answerB: "J" },
        { id: 34, title: "在下列一对词语中，哪一个词语更合你心意", optionA: "A.热衷", optionB: "B.文静", answerA: "E", answerB: "I" },
        { id: 35, title: "在下列一对词语中，哪一个词语更合你心意", optionA: "A.文静", optionB: "B.外向", answerA: "I", answerB: "E" },
        { id: 36, title: "在下列一对词语中，哪一个词语更合你心意", optionA: "A.有系统", optionB: "B.随意", answerA: "J", answerB: "P" },
        { id: 37, title: "在下列一对词语中，哪一个词语更合你心意", optionA: "A.理论", optionB: "B.肯定", answerA: "N", answerB: "S" },
        { id: 38, title: "在下列一对词语中，哪一个词语更合你心意", optionA: "A.敏感", optionB: "B.公正", answerA: "F", answerB: "T" },
        { id: 39, title: "在下列一对词语中，哪一个词语更合你心意", optionA: "A.令人信服", optionB: "B.感人的", answerA: "T", answerB: "F" },
        { id: 40, title: "在下列一对词语中，哪一个词语更合你心意", optionA: "A.声明", optionB: "B.概念", answerA: "S", answerB: "N" },
        { id: 41, title: "在下列一对词语中，哪一个词语更合你心意", optionA: "A.不受约束", optionB: "B.预先安排", answerA: "P", answerB: "J" },
        { id: 42, title: "在下列一对词语中，哪一个词语更合你心意", optionA: "A.矜持", optionB: "B.健谈", answerA: "I", answerB: "E" },
        { id: 43, title: "在下列一对词语中，哪一个词语更合你心意", optionA: "A.有条不紊", optionB: "B.不拘小节", answerA: "J", answerB: "P" },
        { id: 44, title: "在下列一对词语中，哪一个词语更合你心意", optionA: "A.意念", optionB: "B.实况", answerA: "N", answerB: "S" },
        { id: 45, title: "在下列一对词语中，哪一个词语更合你心意", optionA: "A.同情怜悯", optionB: "B.远见", answerA: "F", answerB: "T" },
        { id: 46, title: "在下列一对词语中，哪一个词语更合你心意", optionA: "A.利益", optionB: "B.祝福", answerA: "T", answerB: "F" },
        { id: 47, title: "在下列一对词语中，哪一个词语更合你心意", optionA: "A.务实的", optionB: "B.理论的", answerA: "S", answerB: "N" },
        { id: 48, title: "在下列一对词语中，哪一个词语更合你心意", optionA: "A.朋友不多", optionB: "B.朋友众多", answerA: "I", answerB: "E" },
        { id: 49, title: "在下列一对词语中，哪一个词语更合你心意", optionA: "A.有系统", optionB: "B.即兴", answerA: "J", answerB: "P" },
        { id: 50, title: "在下列一对词语中，哪一个词语更合你心意", optionA: "A.富想象的", optionB: "B.以事论事", answerA: "N", answerB: "S" },
        { id: 51, title: "在下列一对词语中，哪一个词语更合你心意", optionA: "A.亲切的", optionB: "B.客观的", answerA: "F", answerB: "T" },
        { id: 52, title: "在下列一对词语中，哪一个词语更合你心意", optionA: "A.客观的", optionB: "B.热情的", answerA: "T", answerB: "F" },
        { id: 53, title: "在下列一对词语中，哪一个词语更合你心意", optionA: "A.建造", optionB: "B.发明", answerA: "S", answerB: "N" },
        { id: 54, title: "在下列一对词语中，哪一个词语更合你心意", optionA: "A.文静", optionB: "B.爱合群", answerA: "I", answerB: "E" },
        { id: 55, title: "在下列一对词语中，哪一个词语更合你心意", optionA: "A.理论", optionB: "B.事实", answerA: "N", answerB: "S" },
        { id: 56, title: "在下列一对词语中，哪一个词语更合你心意", optionA: "A.富同情", optionB: "B.合逻辑", answerA: "F", answerB: "T" },
        { id: 57, title: "在下列一对词语中，哪一个词语更合你心意", optionA: "A.具分析力", optionB: "B.多愁善感", answerA: "T", answerB: "F" },
        { id: 58, title: "在下列一对词语中，哪一个词语更合你心意", optionA: "A.合情合理", optionB: "B.令人着迷", answerA: "S", answerB: "N" },
        { id: 59, title: "当你要在一个星期内完成一个大项目，你在开始的时候会", optionA: "A.把要做的不同工作依次列出", optionB: "B.马上动工", answerA: "J", answerB: "P" },
        { id: 60, title: "在社交场合中，你经常会感到", optionA: "A.某些人很难打开话匣儿", optionB: "B.与多数人都能从容地长谈", answerA: "I", answerB: "E" },
        { id: 61, title: "要做许多人也做的事，你比较喜欢", optionA: "A.按照一般认可的方法去做", optionB: "B.构想一个自己的想法", answerA: "S", answerB: "N" },
        { id: 62, title: "你刚认识的朋友能否说出你的兴趣？", optionA: "A.马上可以", optionB: "B.要待他们真正了解你之后才可以", answerA: "E", answerB: "I" },
        { id: 63, title: "你通常较喜欢的科目是", optionA: "A.讲授概念和原则的", optionB: "B.讲授事实和数据的", answerA: "N", answerB: "S" },
        { id: 64, title: "哪个是较高的赞誉，或称许为？", optionA: "A.一贯感性的人", optionB: "B.一贯理性的人", answerA: "F", answerB: "T" },
        { id: 65, title: "你认为按照程序表做事", optionA: "A.一般来说你不大喜欢这样做", optionB: "B.一般是有帮助而且是你喜欢做的", answerA: "P", answerB: "J" },
        { id: 66, title: "和一群人在一起，你通常会选", optionA: "A.跟你很熟悉的个别人谈话", optionB: "B.参与大伙的谈话", answerA: "I", answerB: "E" },
        { id: 67, title: "在社交聚会上，你会", optionA: "A.是说话很多的一个", optionB: "B.让别人多说话", answerA: "E", answerB: "I" },
        { id: 68, title: "把周末期间要完成的事列成清单，这个主意会", optionA: "A.合你意", optionB: "B.使你提不起劲", answerA: "J", answerB: "P" },
        { id: 69, title: "哪个是较高的赞誉，或称许为", optionA: "A.能干的", optionB: "B.富有同情心", answerA: "T", answerB: "F" },
        { id: 70, title: "你通常喜欢", optionA: "A.事先安排你的社交约会", optionB: "B.随兴之所至做事", answerA: "J", answerB: "P" },
        { id: 71, title: "总的说来，要做一个大型作业时，你会选", optionA: "A.边做边想该做什么", optionB: "B.首先把工作按步细分", answerA: "P", answerB: "J" },
        { id: 72, title: "你能否滔滔不绝地与人聊天", optionA: "A.只限于跟你有共同兴趣的人", optionB: "B.几乎跟任何人都可以", answerA: "I", answerB: "E" },
        { id: 73, title: "你会", optionA: "A.跟随一些证明有效的方法", optionB: "B.针对未解决的难题分析还有什么毛病", answerA: "S", answerB: "N" },
        { id: 74, title: "为乐趣而阅读时，你会", optionA: "A.喜欢奇特或创新的表达方式", optionB: "B.喜欢作者直话直说", answerA: "N", answerB: "S" },
        { id: 75, title: "你宁愿替哪一类上司（或者老师）工作？", optionA: "A.天性淳良，但常常前后不一的", optionB: "B.言词尖锐但永远合乎逻辑的", answerA: "T", answerB: "N" },
        { id: 76, title: "你做事多数是", optionA: "A.按当天心情去做", optionB: "B.照拟好的程序表去做", answerA: "P", answerB: "J" },
        { id: 77, title: "你是否", optionA: "A.可以和任何人按需求从容地交谈", optionB: "B.在某种情况下才可以畅所欲言", answerA: "E", answerB: "I" },
        { id: 78, title: "要作决定时，你认为比较重要的是", optionA: "A.据事实衡量", optionB: "B.考虑他人的感受和意见", answerA: "T", answerB: "F" },
        { id: 79, title: "在下列一对词语中，哪一个词语更合你心意？", optionA: "A.想象的", optionB: "B.真实的", answerA: "N", answerB: "S" },
        { id: 80, title: "在下列一对词语中，哪一个词语更合你心意？", optionA: "A.仁慈慷慨的", optionB: "B.意志坚定的", answerA: "F", answerB: "T" },
        { id: 81, title: "在下列一对词语中，哪一个词语更合你心意？", optionA: "A.公正的", optionB: "B.有关怀心", answerA: "T", answerB: "F" },
        { id: 82, title: "在下列一对词语中，哪一个词语更合你心意？", optionA: "A.制作", optionB: "B.设计", answerA: "S", answerB: "N" },
        { id: 83, title: "在下列一对词语中，哪一个词语更合你心意？", optionA: "A.可能性", optionB: "B.必然性", answerA: "N", answerB: "S" },
        { id: 84, title: "在下列一对词语中，哪一个词语更合你心意？", optionA: "A.温柔", optionB: "B.力量", answerA: "F", answerB: "T" },
        { id: 85, title: "在下列一对词语中，哪一个词语更合你心意？", optionA: "A.实际", optionB: "B.多愁善感", answerA: "T", answerB: "F" },
        { id: 86, title: "在下列一对词语中，哪一个词语更合你心意？", optionA: "A.制造", optionB: "B.创造", answerA: "S", answerB: "N" },
        { id: 87, title: "在下列一对词语中，哪一个词语更合你心意？", optionA: "A.新颖的", optionB: "B.已知的", answerA: "N", answerB: "S" },
        { id: 88, title: "在下列一对词语中，哪一个词语更合你心意？", optionA: "A.同情", optionB: "B.分析", answerA: "F", answerB: "T" },
        { id: 89, title: "在下列一对词语中，哪一个词语更合你心意？", optionA: "A.坚持己见", optionB: "B.温柔有爱心", answerA: "T", answerB: "F" },
        { id: 90, title: "在下列一对词语中，哪一个词语更合你心意？", optionA: "A.具体的", optionB: "B.抽象的", answerA: "S", answerB: "N" },
        { id: 91, title: "在下列一对词语中，哪一个词语更合你心意？", optionA: "A.全心投入", optionB: "B.有决心的", answerA: "F", answerB: "T" },
        { id: 92, title: "在下列一对词语中，哪一个词语更合你心意？", optionA: "A.能干", optionB: "B.仁慈", answerA: "T", answerB: "F" },
        { id: 93, title: "在下列一对词语中，哪一个词语更合你心意？", optionA: "A.实际", optionB: "B.创新", answerA: "S", answerB: "N" },
        { id: 94 }
      ]
    }
  },
  methods: {
    keepAnswer(item, choose) {
      var answer = "";
      if (choose == "A") {
        answer = item.answerA
      } else if (choose == "B") {
        answer = item.answerB
      }
    },
    optionA(item) {
      this.keepAnswer(item, "A");
      (this.$refs.carousel).next();
    },
    optionB(item) {
      this.keepAnswer(item, "B");
      (this.$refs.carousel).next();
    }
  }

}
</script>

<style>
h1 {
  font-weight: bold;
  font-size: 30px;
  color: rgb(14, 79, 91);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
}

h5 {
  font-weight: bold;
  color: rgb(14, 79, 91);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
}

.test {
  position: absolute;
  left: 46%;
  top: 65%;
  width: 400px;
  padding: 40px;
  margin: -190px 0 0 -175px;
  border-radius: 5px;
  background: #e0f1fc;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.question {
  font-size: 20px;
  color: #126b7e;
}

.options {
  font-size: 25px;
  width: 80%;
  margin: 22px auto;
  color: #000000;
  background-color: #e0f1fc;
}

.result {
  width: 50%;
  height: 100px;
  font-size: 25px;
  margin-top: 130px;
  margin-left: 100px;
}
</style>